<script>
import DocShow from '@/views/readTrain/compont/docShow.vue'
import AnswerShow from '@/views/readTrain/compont/answerShow.vue'
import TimerIsland from '@/views/readTrain/compont/TimerIsland.vue'

export default {
  name: 'RaedStudyPage',
  components: { TimerIsland, AnswerShow, DocShow },
  data() {
    return {
      showQuestion: false // 是否展示题目
    }
  },
  mounted() {
    // 页面淡入动画
    this.$el.classList.add('fade-in')
  },
  created() {
  },
  methods: {}
}
</script>

<template>
  <div class="study-container">
    <div class="passage-answer-div">
      <div class="left-passage">
        <div class="doc-content-wrapper">
          <doc-show />
        </div>

        <div class="action-buttons">
          <el-button type="primary" @click="showQuestion = !showQuestion">
            <i v-if="showQuestion" class="fa-solid fa-minimize" />
            <i v-else class="fa-solid fa-maximize" />
            {{ showQuestion ? '收起题目' : '展开题目' }}
          </el-button>

          <timer-island />
        </div>
      </div>

      <div class="answer-show-wrapper" :class="{ 'is-open': showQuestion }">
        <div class="answer-inner">
          <answer-show />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局重置 */
::v-deep * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.study-container {
  background-color: #f5f2ed;
  min-height: 100vh;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.passage-answer-div {
  display: flex;
  height: calc(100vh - 40px);
  overflow: hidden; /* 防止动画期间出现滚动条 */
}

/* === 左侧区域：永远占据剩余空间 === */
.left-passage {
  flex: 1; /* 关键：自动撑满剩余空间 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 加上 min-width 防止左侧被压缩到消失 */
  min-width: 0;
}

.doc-content-wrapper {
  flex: 0 1 auto;
  overflow-y: auto;
}

/* 按钮区 */
.action-buttons {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  border-radius: 16px;
  padding: 10px 10px;
  background-color: #ffffff;
  flex-shrink: 0;
  white-space: nowrap;
}

/* === 右侧区域：推拉门动画 === */
.answer-show-wrapper {
  /* 1. 初始状态 (关闭) */
  width: 0;                /* 宽度为 0 */
  opacity: 0;              /* 透明 */
  margin-left: 0;          /* 紧贴左侧，无间距 */
  overflow: hidden;        /* 隐藏内容 */

  /* 2. 动画设置：宽度、透明度、边距同时变化 */
  transition:
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease-in,
    margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. 展开状态 (is-open) */
.answer-show-wrapper.is-open {
  /* 这里设定你想要的右侧宽度，比如 500px，或者 40% */
  width: 520px;
  opacity: 1;
  /* 展开时，增加左间距，把左侧内容“推”开 */
  margin-left: 20px;
}

/* 4. 内部容器：固定宽度，防止内容挤压 */
.answer-inner {
  /* 宽度与父级展开宽度一致，或者更大 */
  width: 520px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
}

/* element UI button 样式 */
.action-buttons .el-button {
  border-radius: 8px;
  padding: 8px 16px;
}
.action-buttons .el-button i {
  margin-right: 6px;
}
</style>
